<template>
  <div :class="classNames">
    <span v-if="isMobile" :class="`${baseClassName}-logo`">
      <router-link :to="{ name: 'index' }">
        <img src="@/assets/logo.png" alt="logo" />
      </router-link>
    </span>
    <div
      v-if="isMobile || collapsedButton"
      id="header-collapsed-button"
      :class="`${baseClassName}-collapsed-button`"
    >
      <slot name="collapsedButton">
        <menu-unfold-outlined v-if="collapsed" @click="handleClick" />
        <menu-fold-outlined v-else @click="handleClick" />
      </slot>
    </div>
    <div v-if="layout === 'mix' && !isMobile" :class="`${baseClassName}-logo`">
      <router-link :to="{ name: 'index' }">
        <img src="@/assets/logo.png" alt="logo" />
        <h1>Admin Pro</h1>
      </router-link>
    </div>
    <div :style="{ flex: 1 }">
      <slot />
    </div>
    <slot name="rightContent" />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  prefixCls: {
    type: String,
    default: 'ant-pro',
  },
  layout: {
    type: String,
    default: 'side',
  },
  theme: {
    type: String,
    default: 'dark',
  },
  isMobile: Boolean,
  collapsed: Boolean,
  collapsedButton: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['collapse']);

const baseClassName = computed(() => `${props.prefixCls}-global-header`);
const classNames = computed(() => ({
  [baseClassName.value]: true,
  [`${baseClassName.value}-layout-${props.layout}`]: props.layout,
}));
const handleClick = (): void => {
  emit('collapse', !props.collapsed);
};
</script>

<style lang="less">
#app-body {
  @import url('./index.less');
}
</style>
